<template>
  <el-card class="box-card">
    <div class="text item">
      <img :src="courseInfo.courseImage" style="width: 50%" />
      <h2>课程名称 {{ courseInfo.name || "实战分析课程" }}</h2>
      <h3>授课教师 {{ courseInfo.teacher || "泰迪云平台管理员" }}</h3>
      <h3>课程价格 {{ courseInfo.price || (this.courseId % 3) * 98 }}</h3>
      <h4>
        学习人数
        {{ courseInfo.studentCount || ((this.courseId * 53 + 97) % 100) + 50 }}
      </h4>
      <h4>笔记数量 {{ courseInfo.noteCount || (this.courseId + 73) % 17 }}</h4>
    </div>
  </el-card>
</template>

<script>
import axios from "axios";
export default {
  name: "CourseInfo",
  props: {
    courseId: String,
  },
  data() {
    return {
      courseInfo: {
        courseImage: `https://4c-2024-whu-edu-web.oss-cn-wuhan-lr.aliyuncs.com/onlyNeededImg/${this.$route.query.courseId}.jpg`,
        name: "分析训练",
        teacher: "暂无数据",
        price: 0,
        studentCount: 0,
        noteCount: 0,
      },
    };
  },

  methods: {
    getCourseInfo() {
      axios
        .get(
          `http://localhost:8080/Course/info?courseId=${this.$route.query.courseId}`
        )
        .then((res) => {
          if (res.data !== null) {
            // console.log(res);
            this.courseInfo.name = res.data.name;
            this.courseInfo.teacher = res.data.cTeacherName;
            this.courseInfo.price = res.data.price;
            this.courseInfo.studentCount = res.data.stu_number;
            this.courseInfo.noteCount = res.data.note_num;
          } else {
            console.log("No course info found");
          }
        });
    },
  },
  beforeMount() {
    // console.log(this.$route.query);
    // console.log(this.$route.query.courseId);
    this.getCourseInfo();
  },
};
</script>

<style scoped>
.box-card {
  display: flex;
  flex: 1;
  overflow-y: scroll;
  box-sizing: border-box;
  margin: 0 4%;
  max-height: 37vh;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.text {
  text-align: center;
}

.text img {
  margin: 2px 0;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.text.item h2,
.text.item h3,
.text.item h4 {
  font-family: "Arial", sans-serif;
  margin: 3px 0;
}

.text.item h2 {
  font-size: 22px;
}

.text.item h3 {
  font-size: 18px;
  background-color: #f6f6f6;
  border-bottom: none;
}

.text.item h4 {
  font-size: 16px;
}
</style>
